
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='${pageContext.request.contextPath}/css/fullcalendar/fullcalendar.css' />
        <link rel='stylesheet' type='text/css' href='${pageContext.request.contextPath}/css/fullcalendar/fullcalendar.print.css' media='print' />

        <script type='text/javascript' src='${pageContext.request.contextPath}/js/fullcalendar.min.js'></script>



        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type='text/javascript'>

            $(document).ready(function() {	
                
                var $tabs  = $("div#tabs").tabs();  
                
                $('#calendar').fullCalendar({
		
                    // US Holidays
                    events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
			
                    eventClick: function(event) {
                        // opens events in a popup window
                        window.open(event.url, 'gcalevent', 'width=700,height=600');
                        return false;
                    },
			
                    loading: function(bool) {
                        if (bool) {
                            $('#loading').show();
                        }else{
                            $('#loading').hide();
                        }
                    }
			
                });
                
                
                var speed = 700;
                var pause = 3500;
                function removeFirst(){
                    $('ul#listticker li:first').fadeOut('slow', function() {addLast(this);});
                }
                function addLast(first){
                    $(first).insertAfter('ul#listticker li:last').fadeIn('slow');
                }

                interval = setInterval(removeFirst, pause);
                
		
            });

        </script>
        <style type='text/css'>


            #loading {
                position: absolute;
                top: 5px;
                right: 5px;
            }

            #calendar {
                width: 250px;
                margin: 0 auto;                
                text-align: center;
                font-size: 10px;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            }


            #listticker{
                height:200px;
                width:200px;
                overflow:hidden;
                --border:solid 1px #DEDEDE;
                padding:6px 10px 14px 10px;;
            }
            #listticker li{
                border:0; margin:0; padding:0; list-style:none;
            }

            #listticker li{
                height:60px;
                padding:5px;
                list-style:none;
            }
            #listticker a{
                color:#000000;
                margin-bottom:
            }
            #listticker .news-title{
                display:block;
                font-weight:bold;
                margin-bottom:4px;
                font-size:11px;
            }
            #listticker .news-text{
                display:block;
                font-size:11px;
                color:#666666;
            }
            #listticker img{
                float:left;
                margin-right:14px;
                padding:4px;
                border:solid 1px #DEDEDE;
            }


        </style>
    </head>
    <body>
        <br/>
        <!--        <div align="center">
                    <form class="searchform">
                        <input class="searchfield" type="text"/>
                        <input class="searchbutton" type="button" value="Go" />
                    </form>
                </div>-->


        <table width="100%">
            <tr>
                <td>
                    <fieldset class="aras1" style="height: 250px">
                        <legend>ANNOUNCEMENT</legend>
                        <ul id="listticker">
                            <li>
                                <img src="images/who.jpg" width="50" height="50"/>
                                <a href="" onclick="alert('not yet available');" class="news-title">Agent Available!</a>
                                <span class="news-text">New Agent available in Lembah Klang!!</span>
                            </li>
                            <li>
                                <img src="images/1_1_empty.gif" />
                                <a href="" onclick="alert('not yet available');" class="news-title">Sale Or Rent!</a>
                                <span class="news-text">New Apartment Available!!</span>
                            </li>
                            <li>
                                <img src="images/who.jpg" width="50" height="50"/>
                                <a href="" onclick="alert('not yet available');" class="news-title">Web Designer needed!</a>
                                <span class="news-text">Interesting Salary, a lot of Benefits , permanent !!</span>
                            </li>
                            <li><img src="images/who.jpg" width="50" height="50"/>
                                <a href="" onclick="alert('not yet available');" class="news-title">Agent needed!</a>
                                <span class="news-text">Interesting Salary, a lot of Benefits , permanent !!</span></li>
                            <li>My News 5</li>
                        </ul>
                    </fieldset>
                </td>
                <td>
                    <fieldset class="aras1" style="height: 250px">
                        <legend>LATEST EVENT</legend>
                        <div id='calendar'></div>
                    </fieldset>
                </td>
                <td valign="top">
                    <fieldset class="aras1" style="height: 250px">
                        <legend>SERVICES</legend>
                        <a href="http://www.yellowpages.com.my">
                            <img src="${pageContext.request.contextPath}/images/yellow_pages.jpg" width="100"/>
                        </a>
                    </fieldset>
                </td>
            </tr>
        </table>        
        <br/>


        <table width="246" border="0" cellpadding="0" cellspacing="0" class="normal_bold">
            <tr>
                <td><img src="images/1_1_empty.gif" width="50" height="8"></td>
            </tr>
            <tr>
                <td><img src="images/1_1_empty.gif" width="50" height="8"></td>
            </tr>
        </table>
    </body>
</html>